<template>
  <div class="container">
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-col class="say">说明:目前支持学科和关键字条件筛选</el-col>
        <el-col>
          <el-row type="flex" justify="end">
            <el-button
              icon="el-icon-edit"
              size="small"
              type="success"
              style="margin-bottom: 15px"
              @click="$router.push('/questions/new')"
              >新增试题</el-button
            >
          </el-row>
        </el-col>
      </el-row>
      <el-form ref="form" label-width="70px" :model="formData">
        <el-row class="frame">
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select
                style="width: 96%"
                placeholder="请选择"
                v-model="formData.subjectID"
              >
                <el-option
                  v-for="(item, index) in list"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="catalogID">
              <el-select
                style="width: 96%"
                placeholder="请选择"
                v-model="formData.catalogID"
              >
                <el-option
                  v-for="(item, index) in catalogID"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="tags">
              <el-select
                style="width: 96%"
                placeholder="请选择"
                v-model="formData.tags"
              >
                <el-option
                  v-for="(item, index) in tag"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input
                style="width: 96%"
                placeholder="请输入"
                v-model="formData.keyword"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row class="frame">
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                style="width: 96%"
                placeholder="请选择"
                v-model="formData.questionType"
                @focus="questionTypes"
              >
                <el-option
                  v-for="(item, index) in questionsType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select
                style="width: 96%"
                placeholder="请选择"
                v-model="formData.difficulty"
              >
                <el-option
                  v-for="(item, index) in difficulty"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select
                style="width: 96%"
                placeholder="请选择"
                v-model="formData.direction"
              >
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select
                style="width: 96%"
                placeholder="请选择"
                v-model="formData.creatorID"
              >
                <el-option
                  v-for="(item, index) in getUsers"
                  :key="index"
                  :label="item.username"
                  :value="item.username"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input
                style="width: 96%"
                v-model="formData.remarks"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input
                style="width: 96%"
                v-model="formData.shortName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" prop="province">
              <el-select
                style="width: 48%; margin-right: 3px"
                placeholder="请选择"
                size="small"
                v-model="formData.province"
                @change="this.getCitys"
              >
                <el-option
                  v-for="(item, index) in getCity.citys"
                  :key="index"
                  :value="item"
                ></el-option>
              </el-select>
              <el-select
                placeholder="请选择"
                style="width: 48%"
                size="small"
                v-model="formData.city"
              >
                <el-option
                  v-for="(item, index) in getCity.city"
                  :key="index"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-row type="flex" justify="end" style="width: 96%">
              <el-button size="small" style="float: right" @click="eliminate"
                >清除</el-button
              >
              <el-button
                type="primary"
                size="small"
                style="float: right"
                @click="getSearch"
                >搜索</el-button
              >
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <!-- 消息提示框 -->
      <el-alert
        :title="`数据一共${getListQuestions.length}条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 表格内容区域 -->
      <el-row>
        <el-table stripe shadow="always" :data="getListQuestions">
          <el-table-column prop="date" label="试题编号" align="center">
            <template v-slot="scope">
              {{ scope.row.number }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="学科" width="115" align="center">
            <template v-slot="scope">
              {{ scope.row.subject }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="目录" align="center">
            <template v-slot="scope">
              {{ scope.row.catalog }}
            </template>
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            align="center"
            :formatter="questionTypeTX"
          >
            <!-- <template v-slot="scope" :formatter="questionTypeTX">
              {{ scope.row.questionType }}
            </template> -->
          </el-table-column>
          <!-- <el-table-column width="100"></el-table-column> -->
          <el-table-column
            prop="address"
            label="题干"
            align="center"
            width="300"
          >
            <template v-slot="{ row }"
              ><div v-html="row.question"></div
            ></template>
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="录入时间"
            width="150"
            align="center"
            :formatter="formatDate"
          >
            <!-- <template v-slot="scope">
              {{ scope.row.addDate }}
            </template> -->
          </el-table-column>
          <el-table-column
            prop="difficulty"
            label="难度"
            align="center"
            :formatter="difficultyND"
          >
            <!-- <template v-slot="scope" :formatter="difficultyND">
              {{ scope.row.difficulty }}
            </template> -->
          </el-table-column>
          <el-table-column prop="address" label="录入人">
            <template v-slot="scope" :formatter="formatCreatorID">
              {{ scope.row.creator }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="195">
            <template v-slot="scope">
              <el-button
                type="primary"
                icon="el-icon-view"
                circle
                plain
                title="预览"
                trigger="hover"
                @click="preview(scope.row.id)"
              >
              </el-button>

              <el-button
                type="success"
                icon="el-icon-edit"
                circle
                plain
                title="修改"
                trigger="hover"
                @click="$router.push(`/questions/new?id=${scope.row.id}`)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                title="删除"
                trigger="hover"
                @click="deleFn(scope.row)"
              ></el-button>
              <el-button
                type="warning"
                icon="el-icon-check"
                circle
                plain
                title="加入精选"
                trigger="hover"
                @click="setJoin(scope.row.id, scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 放置分页 -->
        <el-row type="flex" justify="end" style="margin-top: 15px">
          <el-pagination
            @size-change="handleSizeChange"
            background
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="page.pagesize"
            layout="prev, pager, next, sizes, jumper"
            :total="page.total"
          >
          </el-pagination>
        </el-row>
      </el-row>
    </el-card>
    <Preview
      :isShow.sync="isShow"
      :details="getListQuestions[rowsID]"
    ></Preview>
  </div>
</template>
<script>
import { simple } from '@/api/hmmm/subjects' // 学科列表
import { simple as simpleY } from '@/api/hmmm/directorys' // 目录简单列表
import { simple as simpleTags } from '@/api/hmmm/tags' // 标签简单列表
import {
  questionType as questionTypes,
  difficulty,
  direction
} from '@/api/hmmm/constants' // 模拟数据
import { list as getUser } from '@/api/base/users' // 获取用户列表
import { provinces, citys } from '@/api/hmmm/citys' // 城市与城区
import { list as getList, remove, choiceAdd } from '@/api/hmmm/questions' // 获取基础题库列表
import Preview from './../components/Preview.vue'
export default {
  data () {
    return {
      list: [], // 学科列表
      catalogID: [], // 目录简单列表
      tag: [], // 标签简单列表
      questionsType: [], // 试题类型
      difficulty: [], // 难度
      direction: [], // 方向
      getUsers: [], // 获取用户列表
      isShow: false, // 预览弹层
      // getProvincess: [], //获取城市信息
      getListQuestions: [], // 获取题库列表
      loading: false,
      // 分页
      page: {
        page: 1, // 当前页码
        pagesize: 5, // 页大小
        total: 0 // 总记录数
      },
      // 表单绑定字段
      formData: {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签名称
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        city: '', // 企业所在城区
        province: '' // 企业所在地城市
      },
      // 城市
      getCity: {
        citys: '',
        city: ''
      },
      rowsID: 0
    }
  },
  components: {
    Preview
  },
  created () {
    this.getSimple()
    this.simpleCatalogID()
    this.simpleTags()
    this.difficultyType()
    this.directionType()
    this.getUser()
    this.getProvinces()
    this.getList()
  },
  watch: {
    'formData.subjectID' (val) {
      this.simpleCatalogID()
      this.simpleTags()
    }
  },
  methods: {
    // 获取学科列表
    getSimple () {
      simple().then((res) => {
        this.list = res.data
        // console.log(this.list);
      })
    },
    // 获取二级目录
    simpleCatalogID () {
      if (this.formData.subjectID) {
        simpleY().then((res) => {
          this.catalogID = res.data
          // console.log(this.catalogID);
        })
      }
    },
    // 获取标签列表
    simpleTags () {
      if (this.formData.subjectID) {
        simpleTags().then((res) => {
          this.tag = res.data
          // console.log(this.tag);
        })
      }
    },
    formatDate (row, column, cellValue, index) {
      const date = cellValue.split('T')
      return date[0] + ' ' + date[1].slice(0, 8)
    },
    // 试题类型
    questionTypes () {
      this.questionsType = questionTypes
    },
    // 难度
    difficultyType () {
      this.difficulty = difficulty
    },
    // 难度
    difficultyND (row, column, cellValue, index) {
      const obj = difficulty.find((item) => item.value * 1 === cellValue * 1)
      return obj ? obj.label : '未知'
    },
    // 题型
    questionTypeTX (row, column, cellValue, index) {
      const obj = questionTypes.find(
        (item) => item.value * 1 === cellValue * 1
      )
      return obj ? obj.label : '未知'
    },
    // 方向
    directionType () {
      this.direction = direction
    },
    // 录入人
    async getUser () {
      const { ...data } = await getUser(this.page, this.keyword)
      this.getUsers = data.data.list
    },
    // 城市
    getProvinces () {
      this.getCity.citys = provinces()
    },
    // 城区
    getCitys (val) {
      this.formData.city = ''
      this.getCity.city = citys(val)
    },
    // 获取题库列表
    async getList () {
      const { data } = await getList(this.page)
      this.page.total = data.counts
      this.getListQuestions = data.items
    },
    // 清除按钮
    eliminate () {
      this.formData = {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签名称
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        city: '', // 企业所在城区
        province: '' // 企业所在地城市
      }
      this.getList()
    },
    // 点击分几页
    handleSizeChange (val) {
      // console.log(val); //10
      this.page.pagesize = val
      // 更新数据
      this.getList()
    },
    // 点击当前页码分页分页
    handleCurrentChange (val) {
      // console.log(val);
      this.page.page = val
      this.getList()
    },
    // 预览
    preview (id) {
      var index = this.getListQuestions.findIndex((item) => item.id === id)
      console.log(index)
      this.isShow = true
      this.rowsID = index
    },
    // 删除按钮
    deleFn (data) {
      this.$confirm('确定删除该数据吗？')
        .then(() => {
          return remove(data)
        })
        .then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
    },
    // 加入精选
    setJoin (id) {
      this.$confirm('此操作将题目加入精选是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(() => {
          choiceAdd({ id, choiceState: 1 }).then(() => {
            this.$message.success('加入成功')
            this.getList()
          })
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 搜索
    getSearch () {
      getList(this.formData).then((res) => {
        // console.log(res)
        this.getListQuestions = res.data.items
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.say {
  font-size: 12px;
  color: pink;
}
.data {
  margin-bottom: 15px;
}
.frame {
  font-weight: 700;
}
</style>
